<template>
  <view>
    <view class="type-box">
      <view
          class="type-box-btn"
          :class="{
            'type-box-btn-selected': type === 1
          }"
          @click="selectType(1)"
      >
        {{ $i18n.enToGlobal("password") }}
        <view
            v-if="type===1"
            class="type-box-line"></view>
      </view>
      <view
          class="type-box-btn"
          :class="{
            'type-box-btn-selected': type === 2
          }"
          @click="selectType(2)"
      >

        {{ $i18n.enToGlobal("Verification code") }}
        <view
            v-if="type===2"
            class="type-box-line"></view>

      </view>
    </view>

    <view style="height: 10px"></view>
    <view style="padding: 0 20rpx 0 20rpx;box-sizing: border-box">
      <view class="login-input-box">
        <view class="icon-box">

          <view class="icon">
              <image class="icon-img" :src="$kt.file.byPath('icon/email.svg')" mode="widthFix"></image>
          </view>

        </view>

        <view class="input-box">
          <input
              autofocus
              class="input"
              @input="param.email = $event.detail.value"
              :adjust-position="false"
              :placeholder="$i18n.enToGlobal('E-mail')"
              type="text"></input>
        </view>

      </view>

      <view style="height: 20rpx"></view>

      <view
          v-if="type===1"
          class="login-input-box">
        <view class="icon-box">

          <view class="icon">
            <image class="icon-img" :src="$kt.file.byPath('icon/key.svg')" mode="widthFix"></image>
          </view>

        </view>

        <view
            style="width: calc(100% - 120rpx)"
            class="input-box">
          <input
              @input="param.password = $event.detail.value"
              class="input"
              :adjust-position="false"
              :placeholder="$i18n.enToGlobal('password')"
              :type="passwordType"></input>

        </view>

        <view
            v-if="passwordType==='password'"
            @click="passwordType = 'text'"

            class="icon-box">

          <view class="icon">
            <view style="font-size: 20rpx">
              <image
                  :src="$kt.file.byPath('icon/eye.svg')"
                  mode="widthFix"
                  class="icon-img"
              ></image>
            </view>
          </view>

        </view>

        <view
            v-if="passwordType==='text'"
            @click="passwordType = 'password'"
            class="icon-box">

          <view class="icon">
            <view style="font-size: 20rpx">
              <image
                  :src="$kt.file.byPath('icon/eyeOff.svg')"
                  mode="widthFix"
                  class="icon-img"
              ></image>
            </view>
          </view>

        </view>

      </view>
      <!-- 使用“邮箱+验证码”自动注册" -->
      <view
          v-if="type===1"
          class="tips">{{ $i18n.enToGlobal("Automatically register using \"email+verification code\"") }}</view>

      <view
          v-if="type===2"
          class="login-input-box">
        <view class="icon-box">

          <view class="icon">
            <image class="icon-img" :src="$kt.file.byPath('icon/sharp.svg')" mode="widthFix"></image>
          </view>

        </view>

        <view class="input-box"
        style="width: calc(100% - 120rpx)"
        >
          <input
              autofocus
              @input="param.verificationCode = $event.detail.value"
              class="input"
              :adjust-position="false"
              :placeholder="$i18n.enToGlobal('Verification code')"
              type="text"></input>
        </view>

        <view
            v-if="!sending&&sendTime<=0"
            @click="sendVerificationCode()"
            class="icon-box icon-box-btn" >

          <view class="icon">
            <view style="font-size: 20rpx">
              <image
                  :src="$kt.file.byPath('icon/send.svg')"
                  mode="widthFix"
                  class="icon-img"
              ></image>
            </view>
          </view>


        </view>

        <view
            v-if="sendTime>0"
            class="icon-box icon-box-btn" >

          <view class="icon">
            <view style="font-size: 28rpx">
              <text>{{sendTime}}</text>
            </view>
          </view>


        </view>

        <view
            v-if="sending&&sendTime<=0"
            @click="sendVerificationCode()"
            class="icon-box icon-box-btn" >

          <view class="icon">
            <view style="font-size: 20rpx">
              <image
                  :src="$kt.file.byPath('kantboot/icon/loading.svg')"
                  mode="widthFix"
                  class="icon-img icon-img-loading"
              ></image>
            </view>
          </view>


        </view>



      </view>
      <!-- 登录后自动注册 -->
      <view
          v-if="type===2"
          class="tips">{{ $i18n.enToGlobal("Automatically register after logging in") }}</view>
    </view>

    <view
        v-if="$i18n.getLanguageCode()==='fi_FI'
    ||$i18n.getLanguageCode()==='bg_BG'
    ||$i18n.getLanguageCode()==='fr_BE'
"
        style="height: 30rpx"
    ></view>

    <view style="height: 30rpx"></view>
    <kt-button
        @click="toNext()"
        ref="nextButton"
        :is-open-box-shadow="false">{{ $i18n.enToGlobal("login") }}{{ " " }}➠
    </kt-button>
    <view style="height: 30rpx"></view>

    <view
        class="agreement-box">
      <view
          class="agreement-text"
          :style="isNotAgree ? 'color: red' : ''"
      >

        <view
            @click="isAgree = !isAgree"
            class="dot-box">
          <view
              v-if="isAgree"
              class="dot"></view>
        </view>
        <!-- 我已阅读并同意 -->
        <text
            @click="isAgree = !isAgree"
        >
          {{$i18n.enToGlobal("I have read and agree")}}
        </text>
        <text>
          {{":"}}
        </text>
        <!-- 用户协议 -->
          <text style="font-weight: bold;margin: 0 5rpx 0 5rpx">
        {{$i18n.enToGlobal("User Agreement")}}
        </text>
        <!-- 隐私协议 -->
        <text style="font-weight: bold;margin: 0 5rpx 0 15rpx">
        {{$i18n.enToGlobal("Privacy Policy")}}
        </text>
      </view>
    </view>

  </view>
</template>

<script>
import phoneJs from "@/pages/login/phone/phone";

export default {
  data() {
    return {
      param: {
        phoneAreaCode: "86",
        typeCode: "email",
        email:"",
        password: "",
        verificationCode: "",
      },
      passwordType:"password",
      uuid: "",
      // 方式
      type: 1,
      // 是否同意协议
      isAgree: false,
      // 是否没有同意协议，用于判断是否可以点击下一步
      isNotAgree: false,
      sending:false,
      sendTime: 0,
    }
  },
  watch: {
    // 监听param的变化
    param: {
      handler(newValue, oldValue) {
        // 所有参数都trim
        for (let key in newValue) {
          newValue[key] = newValue[key].trim();
        }
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    selectType(e) {
      this.type = e;
    },
    toNext() {
      if (this.param.email.trim() === "") {
        // 请输入邮箱
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter a email"));
        return;
      }

      // 判断邮箱格式是否正确
      // 邮箱正则表达式
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (!reg.test(this.param.email)) {
        // 请输入正确的邮箱
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter the correct email"));
        return;
      }

      if(this.type===1){
        if (this.param.password.trim() === "") {
          // 请输入密码
          this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter a password"));
        }
      }


      if(this.type===2){
        if (this.param.verificationCode.trim() === "") {
          // 请输入验证码
          this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter a verification code"));
          return;
        }
      }

      if (!this.isAgree) {
        // 请同意用户协议和隐私政策
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please agree to the User Agreement and Privacy Policy"));
        this.isNotAgree = true;
        setTimeout(() => {
          this.isNotAgree = false;
        }, 2000);
        return;
      }

      if(this.type===1){
        this.passwordLogin();
      }

      if(this.type===2){
        this.loginByEmailAndVerificationCode();
      }

    },
    passwordLogin(){
      this.$refs.nextButton.loading();
      this.$request.send({
        uri:"/user-account-web/userAccountLogin/loginByEmailAndPassword",
        method:"POST",
        data:{
          "email":this.param.email,
          "password":this.param.password
        },
        stateSuccess:(res)=>{
          this.$refs.nextButton.success(res.msg);
          this.$request.setToken(res.data.token);
          this.$kt.userAccount.setSelf(res.data.userAccount);
          this.$kt.userAccount.setIsLogin(true);
          // 发送登录成功事件
          this.$kt.event.emit("login:success");
          // 返回上一页
          uni.navigateBack();
        },
        stateFail:(res)=>{
          console.log(res);
          this.$refs.nextButton.error(res.errMsg);
        }
      });
    },
    // 验证码倒计时
    startCountDown() {
      this.sendTime = 10;
      let inter = setInterval(()=>{
        this.sendTime--;
        if(this.sendTime<=0){
          clearInterval(inter);
        }
      },1000);
    },
    // /user-account-web/userAccountLogin/sendLoginVerificationCodeByPhone
    sendVerificationCode(){
      // 判断邮箱是否填写
      if(this.param.email.trim()===""){
        // 请输入邮箱
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter a email"));
        return;
      }
      // 检测邮箱格式
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (!reg.test(this.param.email)) {
        // 请输入正确的邮箱
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please enter the correct email"));
        return;
      }

      if(this.sending){
        // 请稍后
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please wait"));
        return;
      }
      if(this.sendTime>0){
        // 请稍后
        this.$refs.nextButton.error(this.$i18n.enToGlobal("Please wait"));
        return;
      }

      this.sending=true;
      this.$request.send({
        uri:"/user-account-web/userAccountLogin/sendLoginVerificationCodeByEmail",
        method:"POST",
        data:{
          "email":this.param.email
        },
        stateSuccess:(res)=>{
          this.sending=false;
          this.startCountDown();
        },
        stateFail:(res)=>{
          this.sending=false;
          uni.showToast({
            title:res.errMsg,
            icon:"none"
          })
        }
      });

    },
    /**
     * 根据邮箱加验证码登录
     */
    loginByEmailAndVerificationCode(){
      this.$refs.nextButton.loading();
      this.$request.send({
        uri:"/user-account-web/userAccountLogin/loginByEmailAndVerificationCode",
        method:"POST",
        data:{
          "email":this.param.email,
          "verificationCode":this.param.verificationCode
        },
        stateSuccess:(res)=>{
          this.$refs.nextButton.success(res.msg);
          this.$request.setToken(res.data.token);
          this.$kt.userAccount.setSelf(res.data.userAccount);
          this.$kt.userAccount.setIsLogin(true);
          // 发送登录成功事件
          this.$kt.event.emit("login:success");
          // 返回上一页
          uni.navigateBack();
        },
        stateFail:(res)=>{
          this.$refs.nextButton.error(res.errMsg);
        }
      });

    },

    /**
     * 切换状态
     */
    changeType(e) {
      if (this.getIsEmail(e)) {
        this.param.typeCode = "email"
      } else {
        this.param.typeCode = "phone"
      }
    },


  },
}
</script>

<style lang="scss" scoped>
.login-input-box {
  position: relative;
  height: 55px;
  border: 5rpx solid #F0F0F0;
  //background-color: #f8f8f8;
  border-radius: 20rpx;
  font-size: 32rpx;
  padding: 30rpx;
  box-sizing: border-box;

  .icon-box {
    display: inline-block;
    width: 60rpx;
    height: 100%;
    vertical-align: top;
    text-align: center;
    color: #000000;
    font-weight: bold;
    letter-spacing: 1px;

    .icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      .icon-img{
        width: 40rpx;
      }
    }
  }

  .input-box {
    position: relative;
    display: inline-block;
    width: calc(100% - 60rpx);
    height: 100%;


    .input {
      position: relative;
      width: 100%;
      font-size: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }

  }

}

.agreement-box {
  margin-top: 20rpx;
  width: 100%;
  text-align: center;

  .agreement-text {
    display: inline-block;
    font-size: 24rpx;
    vertical-align: top;
    color: #666666;
  }
}

.agreement-box:active {
  //opacity: .8;
}


.dot-box {
  display: inline-block;
  vertical-align: top;
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  border: 1px solid #000000;
  margin-top: 8rpx;
  position: relative;

  .dot {
    position: absolute;
    width: 15rpx;
    height: 15rpx;
    border-radius: 50%;
    background-color: #666666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.tips {
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
  text-align: left;
}

.type-box {
  margin-top: 10rpx;
  position: relative;
  margin-bottom: 10rpx;

  .type-box-btn {
    position: relative;
    display: inline-block;
    font-size: 28rpx;
    text-align: center;
    width: 50%;
    color: #999999;
    .type-box-line{
      position: absolute;
      width: 100rpx;
      height: 5rpx;
      background-color: #000000;
      bottom: -10rpx;
      border-radius: 10rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .type-box-btn:active {
    opacity: .8;
  }

  .type-box-btn-selected {
    color: #000000;
  }


}

.icon-box-btn:active{
  opacity: .4;
}

.icon-img-loading{
  // 动画
  animation: loading 1s infinite;
  // 颜色反转
  filter: invert(1);
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
